<template>
  <div class="register">
    <navbar>
      <div slot="center">注册</div>
    </navbar>
    <div class="limg">
      <img
        src="../../assets/images/user.png"
        alt=""
      >
    </div>
    <!-- res 就是 LoginText里面传过来的text -->
    <register-text
      label="姓名"
      style="margin:5px 0"
      placeholder="请输入姓名"
      rule="^.{6,16}$"
      @inptuChange="res => model.name = res"
    />
    <register-text
      label="密码"
      style="margin:5px 0"
      placeholder="请输入密码"
      type="password"
      rule="^.{6,16}$"
      @inptuChange="res => model.password = res"
    />
    <register-text
      label="确定密码"
      style="margin:5px 0"
      placeholder="请输入确定密码"
      type="password"
      rule="^.{6,16}$"
      @inptuChange="res => model.password_confirmation = res"
    />
    <register-text
      label="邮箱"
      style="margin:5px 0"
      placeholder="请输入邮箱"
      rule="^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"
      @inptuChange="res => model.email = res"
    />
    <span
      class="span"
      @click="got('/login')"
    >已有账号,立即登录</span>
    <register-btn
      btn="注册"
      @registerClick='registerClick'
    ></register-btn>
  </div>
</template>
<script>

import Navbar from 'components/common/navbar/Navbar.vue'
import RegisterText from '../../components/common/login/registerText.vue'
import RegisterBtn from '../../components/common/login/registerBtn.vue'

/* 接口调用 */
import { getRegister } from '../../network/register'
import mixins from '../../mixins/index'

// import axios from 'axios'
// const http = axios.create({
//   baseURL: 'https://api.shop.eduwork.cn'
// })




export default {
  /* 封装got('/login')方法 引用 */
  mixins: [mixins],
  data() {
    return {
      model: {
        name: '',
        password: '',
        password_confirmation: '',
        email: ''
      }
    }
  },
  methods: {
    // succesIpt(res) {
    //   // console.log(res);
    //   this.name = res
    // }
    async registerClick() {
      let rulg = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/
      // let rulg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/
      // console.log(111);
      // if (this.name.trim() && this.passwordone.trim() && this.passwordtwo.trim() && this.email.trim()) {
      //   console.log(111);
      // }
      if (this.model.name.trim().length < 6) {
        this.$toast('账号不能少于6个字符');
        return
      }
      if (this.model.password.trim().length < 6) {
        this.$toast('密码不能少于6个字符');
        return
      }
      if (this.model.password.trim() != this.model.password_confirmation.trim()) {
        this.$toast('两次输入密码不一样');
        return
      }
      if (!rulg.test(this.model.email)) {
        this.$toast('邮箱格式不对');
        return
      }
      // console.log(111);
      // const res = await getRegister({ name: this.name, password: this.passwordone, password_confirmation: this.passwordtwo, email: this.email })
      // const res = await http.post('/api/auth/register', { name: this.name, password: this.passwordone, password_confirmation: this.passwordtwo, email: this.email })
      const res = await getRegister(this.model)
      console.log(res);
      if (res == undefined) {
        this.$toast('邮箱已存在');
        return
      }
      if (res != undefined) {
        this.$toast('注册成功!');
        setTimeout(async () => {
          // await got('/login')
          await this.$router.push('/login')
        }, 500)
        // this.mixins.got('/login')
        // this.$router.push('/login')
      }
    }
  },
  components: {
    Navbar,
    RegisterText,
    RegisterBtn
  }
}
</script>
<style lang='less' scoped>
.register {
  height: 100vh;
  position: relative;
  background-color: gainsboro;
  .limg {
    margin-top: 44px;
    background-color: white;
  }
  .span {
    display: block;
    // background: red;
    text-align: left;
    color: #3a90fa;
  }
}
.content {
  position: absolute;
  top: 44px;
  bottom: 49px;
  left: 0;
  right: 0;
}
</style>
